/* ------------------------>> Variables Area <<--------------------*/
/* Size */
/* font */
/* ------------------------>> DMT Common <<--------------------*/
.mainhome .mainhome-container {
  width: 100%;
  margin: 0 auto;
  background: #aaa;
  padding: 1px 0;
  overflow: hidden; }
.mainhome footer {
  border-top: 0;
  margin-top: 0; }

.design30 .header_container {
  width: 100%;
  justify-content: center; }
.design30 .single-container {
  border: none;
  background: #eee;
  padding: 0; }
  .design30 .single-container .row .single-container {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0; }
    .design30 .single-container .row .single-container .row {
      padding-left: 0;
      padding-right: 0;
      margin-right: 0;
      margin-left: 0; }
.design30 .withsidebar .sideselect {
  width: 200px;
  float: left;
  margin-bottom: 30px; }
  .design30 .withsidebar .sideselect .search-bock .title {
    background: #656565;
    color: #fff;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    text-align: center; }
  .design30 .withsidebar .sideselect ul.dlvideoUL {
    background: #fff;
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px #ddd solid;
    border-right: 1px #ddd solid; }
    .design30 .withsidebar .sideselect ul.dlvideoUL li {
      list-style: none;
      font-size: 14px;
      color: #5b5b5b;
      border-bottom: 1px #ddd solid;
      text-align: center; }
      .design30 .withsidebar .sideselect ul.dlvideoUL li.active {
        color: white;
        font-weight: bold; }
        .design30 .withsidebar .sideselect ul.dlvideoUL li.active span {
          border-bottom: 2px solid #86c79c;
          padding-bottom: 3px; }
      .design30 .withsidebar .sideselect ul.dlvideoUL li a {
        padding: 15px;
        display: block; }
.design30 .withsidebar .maincol {
  width: calc(100% - 210px);
  float: right; }
  .design30 .withsidebar .maincol .vague_search_bar:first-child {
    margin-top: 0; }
  .design30 .withsidebar .maincol .product-intro-container {
    width: 100%;
    margin: 0;
    padding: 0;
    margin-bottom: 10px; }
    .design30 .withsidebar .maincol .product-intro-container:first-child {
      margin-top: 0; }
    .design30 .withsidebar .maincol .product-intro-container .row {
      margin: 10px -10px; }
.design30 .withsidebar:after {
  content: '';
  display: block;
  clear: both; }
.design30 .home-news {
  background-size: contain;
  height: 70px; }
  .design30 .home-news .title {
    top: 20px;
    bottom: 20px; }
.design30 .home-sub .item {
  width: 25%;
  padding: 0 1px 0 0; }
  .design30 .home-sub .item a {
    display: block;
    overflow: hidden;
    position: relative; }
    .design30 .home-sub .item a .desp {
      text-align: center;
      position: absolute;
      width: 100%;
      top: 0;
      font-weight: 600;
      letter-spacing: 0.5px;
      font-style: italic;
      line-height: 1.2em;
      color: #fff;
      text-shadow: 0 0 5px #000;
      padding: 15px; }
      .design30 .home-sub .item a .desp i {
        border: solid #fff;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 3px;
        margin-left: 6px; }
        .design30 .home-sub .item a .desp i.arrow {
          transform: rotate(-45deg); }
    .design30 .home-sub .item a .detail {
      display: none;
      bottom: 20px;
      right: 15px;
      position: absolute;
      color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.5);
      background: rgba(0, 0, 0, 0.5);
      padding: 4px 10px;
      font-size: 12px; }
      .design30 .home-sub .item a .detail:hover {
        color: #fff;
        border: 1px solid #fff;
        transition: transform 2s cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-transform 2s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
    .design30 .home-sub .item a img {
      width: 100%;
      -webkit-transition: all 1s;
      transition: all 1s; }
    .design30 .home-sub .item a:hover img {
      -webkit-transform: scale(1.1);
      transform: scale(1.1); }

.wrapper {
  margin: 0 auto;
  padding: 0 16.66% 50px;
  width: 100%; }

article {
  position: relative; }

.timeline__nav {
  position: fixed;
  z-index: 99;
  top: 0;
  transition: top .3s ease-out; }
  .timeline__nav ul {
    list-style: none;
    list-style-position: inside;
    margin: 15px 0; }
    .timeline__nav ul li {
      margin: 15px 0;
      padding-left: 0;
      list-style-type: none;
      color: #bfc1c3;
      border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
      cursor: pointer;
      transition: all .3s ease-out; }
      .timeline__nav ul li.active {
        font-weight: bold;
        color: #f94125;
        border-bottom: 1px dotted transparent;
        transform: scale(1.2); }
      .timeline__nav ul li:hover {
        color: #000; }

@media (max-width: 767px) {
  .design30 .mainhome-container {
    padding: 0; }
  .design30 .home-sub .item {
    width: 100%;
    padding: 0;
    border-top: 1px solid #eee;
    padding-bottom: 0; }
  .design30 .single-container {
    padding: 0; }
  .design30 .withsidebar .DlVideo {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    padding-top: 0; }
  .design30 .home-news .title {
    max-width: 250px; }

  .news-detail-container article header .col-md-8 {
    padding-left: 0;
    padding-right: 0; }
  .news-detail-container article header .left {
    padding-right: 0; }

  .news-container .home-sub .item {
    border-right: 0; }
    .news-container .home-sub .item a {
      margin: 0;
      border-right: 0;
      height: auto; }
      .news-container .home-sub .item a .desp {
        font-size: 24px;
        padding: 15px 30px;
        text-align: left; }
      .news-container .home-sub .item a img {
        opacity: 1; } }
@media (min-width: 768px) {
  .design30 .header_container {
    display: block; }

  .news-container {
    width: 100%; }
    .news-container .home-sub .item a .desp {
      font-size: 20px; } }
@media (min-width: 992px) {
  .design30 .header_container {
    display: flex; }

  .news-container .home-sub .item a .desp {
    font-size: 22px; } }
@media (min-width: 1200px) {
  .design30 .header_container {
    width: 1100px; }

  .news-container .home-sub .item a .desp {
    font-size: 24px; } }
@media (min-width: 1440px) {
  .col-lg-3 {
    width: 16.66666667%; }

  .home-sub .col-lg-3 {
    width: 25%; }

  .news-container .home-sub .item a .desp {
    font-size: 32px; } }
@media (min-width: 1600px) {
  .col-xl-3 {
    width: 16.66666667%; } }